<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>大乐透号码模拟器</title>
    <style>
      body {
        font-family: 'Microsoft YaHei', sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        text-align: center;
        background-color: #f5f5f5;
      }
      h1 {
        color: #e74c3c;
      }
      .lottery-container {
        display: flex;
        justify-content: center;
        margin: 30px 0;
      }
      .ball {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 10px;
        font-weight: bold;
        font-size: 20px;
        color: white;
      }
      .front-ball {
        background-color: #e74c3c;
      }
      .back-ball {
        background-color: #3498db;
      }
      .separator {
        display: flex;
        align-items: center;
        font-size: 24px;
        margin: 0 15px;
        color: #7f8c8d;
      }
      button {
        background-color: #2ecc71;
        color: white;
        border: none;
        padding: 12px 24px;
        font-size: 18px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
      }
      button:hover {
        background-color: #27ae60;
      }
      .history {
        margin-top: 30px;
        text-align: left;
      }
      .history h2 {
        color: #2c3e50;
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
      }
      .history-item {
        background-color: white;
        padding: 10px;
        margin: 10px 0;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }
      #front-balls {
        display: flex;
      }
      #back-balls {
        display: flex;
      }
    </style>
  </head>
  <body>
    <h1>大乐透号码模拟器</h1>

    <div class="lottery-container">
      <div id="front-balls">
        <!-- 前区号码将通过JS动态生成 -->
      </div>
      <div class="separator">+</div>
      <div id="back-balls">
        <!-- 后区号码将通过JS动态生成 -->
      </div>
    </div>

    <button id="generate-btn">生成新号码</button>

    <div class="history">
      <h2>历史记录</h2>
      <div id="history-list">
        <!-- 历史记录将通过JS动态生成 -->
      </div>
    </div>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const generateBtn = document.getElementById('generate-btn')
        const frontBallsContainer = document.getElementById('front-balls')
        const backBallsContainer = document.getElementById('back-balls')
        const historyList = document.getElementById('history-list')

        // 生成随机号码函数
        function generateRandomNumbers(min, max, count) {
          const numbers = []
          while (numbers.length < count) {
            const num = Math.floor(Math.random() * (max - min + 1)) + min
            if (!numbers.includes(num)) {
              numbers.push(num)
            }
          }
          return numbers.sort((a, b) => a - b)
        }

        // 生成并显示号码
        function generateAndDisplayNumbers() {
          // 生成前区号码 (1-35选5个)
          const frontNumbers = generateRandomNumbers(1, 35, 5)
          // 生成后区号码 (1-12选2个)
          const backNumbers = generateRandomNumbers(1, 12, 2)

          // 清空容器
          frontBallsContainer.innerHTML = ''
          backBallsContainer.innerHTML = ''

          // 添加前区号码球
          frontNumbers.forEach(num => {
            const ball = document.createElement('div')
            ball.className = 'ball front-ball'
            ball.textContent = num < 10 ? '0' + num : num
            frontBallsContainer.appendChild(ball)
          })

          // 添加后区号码球
          backNumbers.forEach(num => {
            const ball = document.createElement('div')
            ball.className = 'ball back-ball'
            ball.textContent = num < 10 ? '0' + num : num
            backBallsContainer.appendChild(ball)
          })

          // 添加到历史记录
          addToHistory(frontNumbers, backNumbers)
        }

        // 添加到历史记录
        function addToHistory(frontNumbers, backNumbers) {
          const historyItem = document.createElement('div')
          historyItem.className = 'history-item'

          const now = new Date()
          const timeString = now.toLocaleTimeString()

          const frontString = frontNumbers.map(num => (num < 10 ? '0' + num : num)).join(' ')
          const backString = backNumbers.map(num => (num < 10 ? '0' + num : num)).join(' ')

          historyItem.innerHTML = `
                    <strong>${timeString}</strong>: 
                    <span class="front-history">${frontString}</span> + 
                    <span class="back-history">${backString}</span>
                `

          // 添加到历史记录顶部
          historyList.insertBefore(historyItem, historyList.firstChild)

          // 限制历史记录数量
          if (historyList.children.length > 10) {
            historyList.removeChild(historyList.lastChild)
          }
        }

        // 初始生成一组号码
        generateAndDisplayNumbers()

        // 按钮点击事件
        generateBtn.addEventListener('click', generateAndDisplayNumbers)
      })
    </script>
  </body>
</html>
